<template>
  <div class="user_skills">
    <ProTable ref="proTable" :columns="columns" :data="tables" :pagination="false" :border="false" :tool-button="false">
    </ProTable>
  </div>
</template>

<script setup lang="ts">
import { defineProps, reactive, ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";

// ProTable 实例
const proTable = ref<ProTableInstance>();

defineProps({
  tables: {
    type: Array as any,
    default: () => []
  }
});
// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
  { prop: "网络", label: "网络", width: 60 },
  { prop: "小区名", label: "小区名", showOverflowTooltip: false },
  { prop: "最大用户数", label: "最大用户数", sortable: false, width: 120 },
  { prop: "流量（GB)", label: "流量(GB)", sortable: false, width: 70 },
  { prop: "无线利用率", label: "无线利用率", sortable: false, width: 120 },
  { prop: "上行利用率", label: "上行利用率", sortable: false, width: 120 },
  { prop: "下行利用率", label: "下行利用率", sortable: false, width: 120 }
]);
</script>

<style lang="scss" scoped>
.user_skills {
  position: absolute;
  width: 100%;
  height: 100%;
  :deep(.card) {
    background-color: transparent;
    border: none !important;
  }

  // 去掉el-table的所有背景颜色以及所有hover的颜色
  :deep(.el-table),
  :deep(.el-table .el-table__header-wrapper th),
  :deep(.el-table--border) {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background-color: transparent !important;
  }
  :deep(.el-table tr),
  :deep(.el-table__body tr:hover > td) {
    height: 50px;
    font-size: 20px;
    cursor: pointer;
    background-color: transparent !important;
  }
  :deep(.el-table--border th.el-table__cell),
  :deep(.el-table td.el-table__cell) {
    border-bottom: none !important;
  }
  :deep(.el-table--border .el-table__cell) {
    border-right: none !important;
  }
  :deep(.el-table--group .el-table--border) {
    border: none !important;
  }

  /* // 修改高亮当前行颜色 */
  :deep(.el-table tbody tr:hover > td) {
    background: rgb(0 148 255 / 30%) !important;
  }
}
</style>
